<template>
	<div class="account-management">
		<Header />
		<div class="main">
			<div class="content">
				<div class="title">
					<h2>账号管理</h2>
				</div>
				<div class="sub-title">
					<h3>登录方式</h3>
				</div>
				<section>
					<el-button :icon="Message" circle class="left-icon" />
					<div class="right">
						<div class="item">
							<h3>Email</h3>
							<el-button @click="editAction(1)" :icon="Edit" text>编辑</el-button>
						</div>
						<span class="email">{{ email }}</span>
						<div class="item">
							<h3>密码</h3>
							<el-button @click="editAction(2)" :icon="Edit" text>编辑</el-button>
						</div>
					</div>
				</section>
			</div>
		</div>
	</div>
</template>

<script setup>
import { logout, getInfo } from "@/api/login";
import Header from "../Header.vue";
import { useRouter } from "vue-router";
import { ref, onMounted } from "vue";
const router = useRouter();
const email = ref("");
const editAction = (index)=>{
	if(index==1){
		router.push('/update/emails');
	}else if(index==2){
		router.push('/updateWrod');
	}
}
const getInfoData = async () => {
  const res = await getInfo();
  if (res.code == 200) {
    email.value = res.data.email;
  }
};

onMounted(() => {
  getInfoData();
});
</script>

<style lang="scss" scoped>
.main {
	.content {
		margin: 0px auto;
		width: 100%;
		max-width: 32rem;
		padding-left: 1rem;
		padding-right: 1rem;
		padding-bottom: 4rem;
		.title {
			display: flex;
			align-items: center;
			justify-content: center;
			padding-left: 1rem;
			padding-right: 1rem;
			height: 4rem;
			h2 {
				font-size: 1.25rem;
				font-weight: 400;
				line-height: 1.5;
				letter-spacing: 0.05em;
				color: #2d3748;
			}
		}
		.sub-title {
			display: flex;
			height: 4rem;
			align-items: center;
			h3 {
				font-size: 1rem;
				font-weight: 400;
				line-height: 1.5;
				letter-spacing: 0.05em;
				color: #2d3748;
			}
		}
		section {
			display: flex;
			min-height: 4rem;
			align-items: center;
			gap: 1rem;
			:deep(.left-icon) {
				height: 3rem;
				width: 3rem;
				cursor: default;
				font-size: 1.5rem;
				background: #f7fafc;
				border: none;
			}
			.right {
				display: flex;
				flex-grow: 1;
				flex-direction: column;
				.item {
					display: flex;
					height: 4rem;
					align-items: center;
					justify-content: space-between;
					h3 {
						font-size: 1rem;
						font-weight: 400;
						line-height: 1.5;
						letter-spacing: 0.05em;
						color: #2d3748;
					}
					:deep(.el-button) {
						color: #ff8674;
					}
				}
				.email {
					font-size: 0.875rem;
					font-weight: 400;
					line-height: 2;
					letter-spacing: 0.05em;
					color: #718096;
					height: 2.75rem;
				}
			}
		}
	}
}
</style>